<template>
<div>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-container>
                    <el-main>R-CeseTest测试报告</el-main>
                        <el-footer>
                            <div class="reportDetails_call_list">
                            <el-table :data="caseReportDetails" border style="width: 100%">
                              <el-table-column prop="name" label="用例名称" width="100" show-overflow-tooltip></el-table-column>
                              <el-table-column prop="requestMethod" label="请求方法" width="100" show-overflow-tooltip></el-table-column>
                              <el-table-column prop="url" label="请求地址" width="120" show-overflow-tooltip></el-table-column>
                              <el-table-column prop="headers" label="请求头" width="120" show-overflow-tooltip>
                                <template slot-scope="scope">
                                {{scope.row.headers}}
                                </template>
                              </el-table-column>
                              <el-table-column prop="cookies" label="请求Cookie" width="120" show-overflow-tooltip></el-table-column>
                              <el-table-column prop="presendParams" label="请求参数" width="120" show-overflow-tooltip>
                                <template slot-scope="scope">
                                {{scope.row.presendParams}}
                                </template>
                              </el-table-column>
                              <el-table-column prop="checkHttpCode" label="状态码校验" width="120" show-overflow-tooltip></el-table-column>
                              <el-table-column prop="responseHHttpStatusCode" label="实际状态码" width="120" show-overflow-tooltip></el-table-column>
                              <el-table-column prop="checkResponseData" label="数据校验" width="120" show-overflow-tooltip>
                                <template slot-scope="scope">
                                {{scope.row.checkResponseData}}
                                </template>
                              </el-table-column>
                              <el-table-column prop="checkResponseNumber" label="数值校验" width="120" show-overflow-tooltip>
                                <template slot-scope="scope">
                                {{scope.row.checkResponseNumber}}
                                </template>
                              </el-table-column>
                              <el-table-column prop="responseData" label="实际数据" width="200" show-overflow-tooltip></el-table-column>
                              <el-table-column prop="testConclusion" label="测试结论" width="140" show-overflow-tooltip>
                                <template slot-scope="scope">
                                {{scope.row.testConclusion}}
                                </template>
                              </el-table-column>
                              <el-table-column prop="testStartTime" label="测试开始时间" width="120" show-overflow-tooltip></el-table-column>
                              <el-table-column prop="checkResponseTime" label="耗时校验/s" width="100" sshow-overflow-tooltip></el-table-column>
                              <el-table-column prop="spendingTimeInSec" label="测试耗时/s" show-overflow-tooltip></el-table-column>
                            </el-table>
                            </div>
                    </el-footer>
                </el-container>
            </div>
            <div class="grid-content">
                <el-container>
                    <el-aside width="610px">
                        <el-table :data="testReports" style="width: 100%" height="580" @cell-click='getReportDetails'>
                            <el-table-column prop="_id" label="报告编号" width="220"> </el-table-column>
                            <el-table-column prop="executorNickName" label="执行人" width="100"></el-table-column>
                            <el-table-column prop="createAt" label="报告生成时间" width="180"></el-table-column>
                            <el-table-column  label="状态" >             
                                  <template slot-scope="scope">
                                    <el-button  :type="scope.row.passRate === '100%' ? 'success':'danger'">{{ scope.row.passRate === '100%' ? '成功':'失败' }}</el-button>
                                  </template>
                            </el-table-column>
                        </el-table>
                    </el-aside>
                    <div class="table_class_style">
                        <el-table :data="provinceEnvData" style="width: 100%">
                            <el-table-column label="执行环境">
                                <el-table-column prop="province" label="PLATFORM_ENV" width="200"></el-table-column>
                                <el-table-column prop="host" label="PLATFORM_MONGO_HOST" width="280"></el-table-column>
                                <el-table-column prop="port" label="PLATFORM_MONGO_PORT" width="300"></el-table-column>
                                <el-table-column prop="dbname" label="PLATFORM_MONGO_DEFAULT_DBNAME" width="360"></el-table-column>
                            </el-table-column>  
                        </el-table>
                        <template>
                          <div class="reportDetails_call">
                            <el-table :data="casePlanData" border style="width: 100%">
                              <el-table-column label="Case报告">
                                <el-table-column prop="testCount" label="case数" width="100"></el-table-column>
                                <el-table-column prop="passCount" label="通过" width="100"></el-table-column>
                                <el-table-column prop="failedCount" label="失败" width="100"></el-table-column>
                                <el-table-column prop="passRate" label="通过率" width="220">
                                  <template slot-scope="scope">
                                  <el-progress :text-inside="true" :stroke-width="24" :percentage="scope.row.passRate.replace('%','')" status="success"></el-progress>
                                  </template>
                                </el-table-column>
                                <el-table-column prop="comeFrom" label="报告来源" width="170"></el-table-column>
                                <el-table-column prop="createAt" label="开始时间" width="220"></el-table-column>
                                <el-table-column prop="totalTestSpendingTimeInSec" label="耗时" width="80"></el-table-column>
                                <el-table-column prop="createAt" label="操作">
                                  <template slot-scope="scope">
                                    <el-button type="success" :disabled="scope.row.testCount > 1? false:true" @click="dialogTableVisible = true">查看详情</el-button>
                                  </template>
                                </el-table-column>
                              </el-table-column> 
                            </el-table>               
                          </div>
                        </template>
                    </div>
                </el-container>
            </div>
             
        </el-col>
    </el-row>
    <el-dialog title="报告详情" :visible.sync="dialogTableVisible" width="95%">
      <div class="reportDetails_call_dialog">
      <el-table :data="gridData" border height="580">
      <el-table-column property="name" label="用例名称" width="110" show-overflow-tooltip></el-table-column>
      <el-table-column property="requestMethod" label="请求方法" width="110" show-overflow-tooltip></el-table-column>
      <el-table-column property="url" label="请求地址" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column property="headers" label="请求头" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.headers}}
        </template>
      </el-table-column>
      <el-table-column property="cookies" label="请求Cookie" width="110" show-overflow-tooltip></el-table-column>
      <el-table-column property="presendParams" label="请求参数" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.presendParams}}
        </template>
      </el-table-column>
      <el-table-column property="checkHttpCode" label="状态码校验" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column property="responseHHttpStatusCode" label="实际状态码" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="checkResponseData" label="数据校验" width="120" show-overflow-tooltip>
      <template slot-scope="scope">
      {{scope.row.checkResponseData}}
      </template>
      </el-table-column>
      <el-table-column prop="checkResponseNumber" label="数值校验" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
        {{scope.row.checkResponseNumber}}
        </template>
      </el-table-column>
      <el-table-column prop="responseData" label="实际数据" width="160" show-overflow-tooltip></el-table-column>
      <el-table-column prop="testConclusion" label="测试结论" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
        {{scope.row.testConclusion}}
        </template>
      </el-table-column>
      <el-table-column property="testStartTime" label="测试开始时间" width="130" show-overflow-tooltip></el-table-column>
      <el-table-column property="checkResponseTime" label="耗时校验/s" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column property="spendingTimeInSec" label="测试耗时/s" show-overflow-tooltip></el-table-column>
      </el-table>
      </div>
    </el-dialog>
</div>
</template>

<script>
import {getConfigDetails, getReportList, getReportDetail} from '../../api/testReport';
export default {
    data() {
    return {
        caseDataDetails:[{
          name:'',
          requestMethod:'',
          url:'',
          headers:'',
          cookies:'',
          presendParams:'',
          checkHttpCode:'',
          responseHttpStatusCode:'',
          checkResponseData:'',
          checkResponseNumber:'',
          checkResponseSimilarity:'',
          responseData:'',
          testConclusion:'',
          testStartTime:'',
          checkResponseTime:'',
          spendingTimeInSec:''
        }],
        testReports:[],
        caseData:[{
            testCount: '',
            passCount: '',
            failedCount: '',
            passRate: '',
            comeFrom: '',
            createAt: '',
            totalTestSpendingTimeInSec: ''
        }],
        provinceEnvData:[{
            province: '',
            host: '',
            port: '',
            dbname:''
        }],
        gridData: [],
        formLabelWidth: '120px',
        dialogTableVisible: false,
        statusChangeLoading: true
    }
    },
    created(){
        this.getConfigDetails()
        this.getReportList()
        // console.log(this.caseData.passRate)
    },
    computed: {
      casePlanData:{
        get() {
          if (Array.isArray(this.caseData) && this.caseData.length) {
            const {testCount,passCount,failedCount,passRate,comeFrom,createAt,totalTestSpendingTimeInSec} = this.caseData[0]
              return [{
                testCount,
                passCount,
                failedCount, 
                passRate,
                comeFrom,
                createAt,
                totalTestSpendingTimeInSec
            }]
          }
          return []
        },
        set(value) {
          this.caseData = [value]
        }
      },
      caseReportDetails:{
        get() {
            if (Array.isArray(this.caseDataDetails) && this.caseDataDetails.length) {
              const {responseData,responseHttpStatusCode,spendingTimeInSec,testStartTime} = this.caseDataDetails[0]
              const {name,requestMethod,url,headers,cookies,presendParams,checkHttpCode,checkResponseData,checkResponseNumber,checkResponseSimilarity,checkResponseTime} = this.caseReportDetails_other || {}
              const testConclusion = this.caseReportDetails_other_Conclusion || {}
                return [{
                  responseData,
                  responseHttpStatusCode ,
                  spendingTimeInSec, 
                  testStartTime,
                  name,
                  requestMethod,
                  url,
                  headers,
                  cookies,
                  presendParams,
                  checkHttpCode,
                  checkResponseData,
                  checkResponseNumber,
                  checkResponseSimilarity,
                  checkResponseTime,
                  testConclusion
              }]
            }
            return []
          },
        set(value) {
          this.caseDataDetails = [value]
        }
      },
    },
    methods:{
        getConfigDetails(){
             getConfigDetails().then((res) => {
                let {status, data} = res;
                     if (status === 'ok') {
                        this.provinceEnvData[0].province = data.env
                        this.provinceEnvData[0].host = data.host
                        this.provinceEnvData[0].port = data.port
                        this.provinceEnvData[0].dbname = data.dbname
                     }
                })
        },
        getReportList(){
             getReportList().then((res) => {
                let {status, data} = res;
                     if (status === 'ok') {
                        this.testReports = data.rows
                        if(Array.isArray(data.rows) && data.rows.length) {
                          this.casePlanData = data.rows[0]
                          this.getReportDetail(data.rows[0].projectId,data.rows[0]._id)
                        }
                     }
                })
        },
        getReportDetail(projectId,_id){
             getReportDetail(projectId,_id).then((res) => {
                let {status, data} = res;
                     if (status === 'ok') {
                        this.testReportDetails = data.testDetail
                        if(Array.isArray(data.testDetail) && data.testDetail.length) {   
                          this.caseReportDetails_other = data.testDetail[0].testBaseInfo
                          this.caseReportDetails_other_Conclusion = data.testDetail[0].testConclusion
                          this.caseReportDetails = data.testDetail[0]
                        }
                        if(data.testDetail.length>1){
                          data.testDetail.forEach(item => {
                            this.gridData.push({...item, name: item.testBaseInfo.name,requestMethod: item.testBaseInfo.requestMethod,
                            url: item.testBaseInfo.url,headers: item.testBaseInfo.headers,cookies: item.testBaseInfo.cookies,
                            presendParams: item.testBaseInfo.presendParams,checkHttpCode: item.testBaseInfo.checkHttpCode,
                            checkResponseData: item.testBaseInfo.checkResponseData,checkResponseNumber: item.testBaseInfo.checkResponseNumber,
                            checkResponseSimilarity: item.testBaseInfo.checkResponseSimilarity,checkResponseTime: item.testBaseInfo.checkResponseTime,
                            responseData: item.responseData,responseHttpStatusCode: item.responseHttpStatusCode,spendingTimeInSec: item.spendingTimeInSec,testStartTime: item.testStartTime,
                            testConclusion: item.testConclusion})
                          })
                          console.log(this.gridData);
                        }
                     }
                })
        },
        getReportDetails(index){
          this.gridData = []
              this.casePlanData = index
              this.getReportDetail(index.projectId,index._id)
        },
    }
}
</script>


<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fdfdfd;
  }
  .bg-purple {
    background: #fdfdfd;
  }
  .bg-purple-light {
    background: #fdfdfd;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #fdfdfd;
  }
  .el-main {
    background-color: #fdfdfd;
    color: #333;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    font-weight:700;
  }
  .el-footer {
    background-color: #fdfdfd;
    color: #333;
    text-align: center;
    line-height: 20px;
  }
  .el-aside {
    background-color: #fdfdfd;
    color: #333;
    text-align: center;
    line-height: 20px;
    border-right:rgb(27, 27, 27);
    margin-top: 5%;
  }
  .el-table th>.cell {
    font-weight: bold;
  }
  .table_class_style{
    margin-top: 7%;
    margin-left: 3%;
    
  }
  .grid-content{
      margin-left: 2%;
  }
  .table_class_style>.el-table th{
      text-align: center;
  }
  .table_class_style>.el-table td{
      text-align: center;
  }
  .reportDetails_call{
      margin-top: 8%;
  }
  .reportDetails_call>.el-table th{
      text-align: center;
  }
   .reportDetails_call>.el-table td{
      text-align: center;
  }
  .reportDetails_call_list>.el-table th{
      text-align: center;
  }
  .reportDetails_call_list>.el-table td{
      text-align: center;
  }
  .reportDetails_call_dialog>.el-table th{
      text-align: center;
  }
  .reportDetails_call_dialog>.el-table td{
      text-align: center;
  }
</style>